import Vue from "vue";
// 导入vuex
import Vuex from "vuex";

// 导入命名模块
import film from "./modules/film"

// 使用vuex
Vue.use(Vuex);
// 通过vue创建store 并导出
export default new Vuex.Store({
  // 初始化状态数据
  state: {
    num: 1,
  },
  // 监听器 可以获取和修饰state的值 定义获取state的方法
  getters: {
    getNum(state){
      return state.num+"getters"
    }
  },
  // 同步执行方法 修改state数据 vuex中通过mutations将数据统一管理储存 有统一入口进行数据的维护操作
  mutations: {
    // payload 载荷 参数
    add(state, payload) {
      state.num += payload;
    },
    jian(state, payload) {
      state.num = state.num - payload;
    },
  },
  // 异步执行方法 修改state数据 不直接修改数据 调用mutations同步方法进行修改
  // 异步方法也可以写在mutations中，放在actions中是为了vue-devtools调试工具可以对vuex方法进行数据的监听
  actions: {
    // actions中不直接修改数据，调用的是mutations中的方法修改
    // context 仓库对象 pauload 载荷形参
    asyncAdd(context, payload) {
      setTimeout(() => {
        context.commit("add", payload);
      },3000);
    },
  },
  // 模块化 分开管理
  modules: {
    // 模块名称：模块实例
    film:film
  },
});
